/**
* 功能描述：周选择器组件
* @author jin xiaohang
*
* @date 2022/9/29 8:47
* @version 1.0
*/
<template>
    <div  class="yw-week-picker">
        <div  class="yw-week-picker-panel">
            <div  class="yw-week-picker-panel-header">
                <div class="yw-week-picker-table-date" style="position: relative">
                    <a class="yw-week-picker-panel-prev-year-btn"></a>
                    <a class="yw-week-picker-panel-prev-month-btn"></a>
                    <span  class="yw-week-picker-panel-select-btn">
                        <a class="yw-week-picker-panel-select-year">2022年</a>
                        <a class="yw-week-picker-panel-select-month">9月</a>
                    </span>
                    <a class="yw-week-picker-panel-next-month-btn"></a>
                    <a class="yw-week-picker-panel-next-year-btn"></a>
                </div>
            </div>
            <div  class="yw-week-picker-panel-body">
                <table class="yw-week-picker-table">
                    <thead>
                        <tr>
                            <th class="yw-week-picker-table-column-header">
                                <span class="yw-week-picker-table-column-header-inner">一</span>
                            </th>
                            <th class="yw-week-picker-table-column-header">
                                <span class="yw-week-picker-table-column-header-inner">二</span>
                            </th>
                            <th class="yw-week-picker-table-column-header">
                                <span class="yw-week-picker-table-column-header-inner">三</span>
                            </th>
                            <th class="yw-week-picker-table-column-header">
                                <span class="yw-week-picker-table-column-header-inner">四</span>
                            </th>
                            <th class="yw-week-picker-table-column-header">
                                <span class="yw-week-picker-table-column-header-inner">五</span>
                            </th>
                            <th class="yw-week-picker-table-column-header">
                                <span class="yw-week-picker-table-column-header-inner">六</span>
                            </th>
                            <th class="yw-week-picker-table-column-header">
                                <span class="yw-week-picker-table-column-header-inner">日</span>
                            </th>
                        </tr>
                    </thead>
                    <tbody class="yw-week-picker-table-tbody">
                        <tr>
                            <td class="yw-week-picker-table-cell">
                                <div class="yw-week-picker-table-date">1</div>
                            </td>
                            <td class="yw-week-picker-table-cell">
                                <div class="yw-week-picker-table-date">2</div>
                            </td>
                            <td class="yw-week-picker-table-cell">
                                <div class="yw-week-picker-table-date">3</div>
                            </td>
                            <td class="yw-week-picker-table-cell">
                                <div class="yw-week-picker-table-date">4</div>
                            </td>
                            <td class="yw-week-picker-table-cell">
                                <div class="yw-week-picker-table-date">5</div>
                            </td>
                            <td class="yw-week-picker-table-cell">
                                <div class="yw-week-picker-table-date">6</div>
                            </td>
                            <td class="yw-week-picker-table-cell">
                                <div class="yw-week-picker-table-date">7</div>
                            </td>
                        </tr>
                        <tr>
                            <td class="yw-week-picker-table-cell">
                                <div class="yw-week-picker-table-date">8</div>
                            </td>
                            <td class="yw-week-picker-table-cell">
                                <div class="yw-week-picker-table-date">9</div>
                            </td>
                            <td class="yw-week-picker-table-cell">
                                <div class="yw-week-picker-table-date">10</div>
                            </td>
                            <td class="yw-week-picker-table-cell">
                                <div class="yw-week-picker-table-date">11</div>
                            </td>
                            <td class="yw-week-picker-table-cell">
                                <div class="yw-week-picker-table-date">12</div>
                            </td>
                            <td class="yw-week-picker-table-cell">
                                <div class="yw-week-picker-table-date">13</div>
                            </td>
                            <td class="yw-week-picker-table-cell">
                                <div class="yw-week-picker-table-date">14</div>
                            </td>
                        </tr>
                        <tr>
                            <td class="yw-week-picker-table-cell">
                                <div class="yw-week-picker-table-date">15</div>
                            </td>
                            <td class="yw-week-picker-table-cell">
                                <div class="yw-week-picker-table-date">16</div>
                            </td>
                            <td class="yw-week-picker-table-cell">
                                <div class="yw-week-picker-table-date">17</div>
                            </td>
                            <td class="yw-week-picker-table-cell">
                                <div class="yw-week-picker-table-date">18</div>
                            </td>
                            <td class="yw-week-picker-table-cell">
                                <div class="yw-week-picker-table-date">19</div>
                            </td>
                            <td class="yw-week-picker-table-cell">
                                <div class="yw-week-picker-table-date">20</div>
                            </td>
                            <td class="yw-week-picker-table-cell">
                                <div class="yw-week-picker-table-date">21</div>
                            </td>
                        </tr>
                        <tr>
                            <td class="yw-week-picker-table-cell">
                                <div class="yw-week-picker-table-date">22</div>
                            </td>
                            <td class="yw-week-picker-table-cell">
                                <div class="yw-week-picker-table-date">23</div>
                            </td>
                            <td class="yw-week-picker-table-cell">
                                <div class="yw-week-picker-table-date">24</div>
                            </td>
                            <td class="yw-week-picker-table-cell">
                                <div class="yw-week-picker-table-date">25</div>
                            </td>
                            <td class="yw-week-picker-table-cell">
                                <div class="yw-week-picker-table-date">26</div>
                            </td>
                            <td class="yw-week-picker-table-cell">
                                <div class="yw-week-picker-table-date">27</div>
                            </td>
                            <td class="yw-week-picker-table-cell">
                                <div class="yw-week-picker-table-date">28</div>
                            </td>
                        </tr>
                        <tr class="yw-week-picker-table-active-date">
                            <td class="yw-week-picker-table-cell">
                                <div class="yw-week-picker-table-date">29</div>
                            </td>
                            <td class="yw-week-picker-table-cell">
                                <div class="yw-week-picker-table-date">30</div>
                            </td>
                            <td class="yw-week-picker-table-cell">
                                <div class="yw-week-picker-table-date">31</div>
                            </td>
                            <td class="yw-week-picker-table-cell">
                                <div class="yw-week-picker-table-date">1</div>
                            </td>
                            <td class="yw-week-picker-table-cell">
                                <div class="yw-week-picker-table-date">2</div>
                            </td>
                            <td class="yw-week-picker-table-cell">
                                <div class="yw-week-picker-table-date">3</div>
                            </td>
                            <td class="yw-week-picker-table-cell">
                                <div class="yw-week-picker-table-date">4</div>
                            </td>
                        </tr>
                        <tr>
                            <td class="yw-week-picker-table-cell">
                                <div class="yw-week-picker-table-date">5</div>
                            </td>
                            <td class="yw-week-picker-table-cell">
                                <div class="yw-week-picker-table-date">6</div>
                            </td>
                            <td class="yw-week-picker-table-cell">
                                <div class="yw-week-picker-table-date">7</div>
                            </td>
                            <td class="yw-week-picker-table-cell">
                                <div class="yw-week-picker-table-date">8</div>
                            </td>
                            <td class="yw-week-picker-table-cell">
                                <div class="yw-week-picker-table-date">9</div>
                            </td>
                            <td class="yw-week-picker-table-cell">
                                <div class="yw-week-picker-table-date">10</div>
                            </td>
                            <td class="yw-week-picker-table-cell">
                                <div class="yw-week-picker-table-date">11</div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: "ywWeekPicker"
}
</script>

<style scoped>

</style>